/*
 * @Author: yangzonglong
 * @Date: 2021-06-30 15:14:10
 * @version: v1.0.0
 * @Descripttion: Upload 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-28 09:12:52
 * @Auditor:
 */
import React, { useCallback, useState, useEffect } from 'react';
import { Form, Checkbox, Select } from 'antd';
import update from 'immutability-helper';
import { MediaProps } from './Media';
import useControlOptions from '../../hooks/useControlOptions';
import FormItemController from './../components/FormItemController';

const FormItem = Form.Item,
  Option = Select.Option,
  widthStyle = { width: '100%', marginBottom: '10px' };

export const fileDataSource = ['image/jpeg', 'image/png', 'image/gif', 'audio/mpeg', 'audio/x-m4a', 'audio/mp4', 'video/mp4'];
const selectData = [
  {
    value: 'left',
    label: '对齐方式-居左',
  },
  {
    value: 'center',
    label: '对齐方式-居中',
  },
  {
    value: 'right',
    label: '对齐方式-居右',
  },
];

const sortData = [
  {
    value: '100%',
    label: '排列方式-一行一个',
  },
  {
    value: '50%',
    label: '排列方式-一行两个',
  },
  {
    value: '33.3%',
    label: '排列方式-一行三个',
  },
  {
    value: '25%',
    label: '排列方式-一行四个',
  },
];

const UploadController = () => {
  const { options, changeFormItemProps, changeControlProps } = useControlOptions<MediaProps>('mediaProps');
  const [acceptChecked, setAcceptChecked] = useState(false);
  const [accept, setAccept] = useState<string[]>([]);
  // const [maxCountFlag, setMaxCountFlag] = useState(false);

  useEffect(() => {
    const accept = options.mediaProps?.accept;
    setAccept(accept ? accept.split(',') : []);
    setAcceptChecked(!!accept);
  }, [options]);

  const changeAccept = useCallback(
    (e) => {
      changeControlProps(
        'mediaProps',
        update(options.mediaProps, {
          accept: { $set: e.join(',') },
        }),
        true
      );
    },
    [changeControlProps, options]
  );

  const changeAcceptChecked = useCallback(
    (e) => {
      setAcceptChecked(e.target.checked);
      if (!e.target.checked) {
        changeControlProps(
          'mediaProps',
          update(options.mediaProps, {
            accept: { $set: '' },
          }),
          true
        );
      }
    },
    [changeControlProps, options]
  );

  // const changeMaxCount = useCallback(
  //   (e) => {
  //     changeControlProps(
  //       'mediaProps',
  //       update(options.mediaProps, {
  //         maxCount: { $set: e },
  //       }),
  //       true
  //     );
  //   },
  //   [changeControlProps, options]
  // );

  const _onChange = useCallback(
    (v, key) => {
      changeFormItemProps('style', { ...options?.formItemProps?.style, [key]: v });
    },
    [changeFormItemProps, options]
  );

  // const changeMaxSize = useCallback(
  //   (e) => {
  //     changeControlProps(
  //       'mediaProps',
  //       update(options.mediaProps, {
  //         maxSize: { $set: e.target.value },
  //       }),
  //       true
  //     );
  //   },
  //   [changeControlProps, options]
  // );

  return (
    <>
      <FormItemController hidePlaceholder hideInitialValue hideRate onChange={changeFormItemProps} options={options?.formItemProps}>
        <FormItem label="显示">
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <Select value={options?.formItemProps?.style?.width} onChange={(v) => _onChange(v, 'width')}>
              {sortData.map((item) => (
                <Option value={item.value} key={item.value}>
                  {item.label}
                </Option>
              ))}
            </Select>

            <Select value={options?.formItemProps?.style?.textAlign} style={{ marginTop: '8px' }} onChange={(v) => _onChange(v, 'textAlign')}>
              {selectData.map((item) => (
                <Option value={item.value} key={item.value}>
                  {item.label}
                </Option>
              ))}
            </Select>
          </div>
        </FormItem>
      </FormItemController>

      <FormItem className="antd-form-item-row" label="限制文件类型">
        <Checkbox onChange={changeAcceptChecked} checked={acceptChecked} />
      </FormItem>

      {acceptChecked && (
        <Select showArrow onChange={changeAccept} value={accept} style={widthStyle} mode="multiple">
          {fileDataSource.map((item) => (
            <Option key={item} value={item}>
              {item}
            </Option>
          ))}
        </Select>
      )}
    </>
  );
};

export default UploadController;
